﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="source/ui.jqgrid.css" rel="stylesheet" />
    <link href="../UiThemes/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
    <link href="../UiThemes/themes/redmond/theme.css" rel="stylesheet" />
    <script src="source/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
    <script src="source/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="source/grid.locale-en.js"></script>
    <script src="source/jquery.jqGrid.min.js"></script>
    <script src="data.js"></script>
</head>
<body>
    <table id="list2"></table>
    <div id="pager2"></div>
</body>
</html>
<script type="text/javascript">

    $(function () {
        jQuery("#list2").jqGrid({
            data: json.rows,
            //url: 'server.php?q=2',
            datatype: "local",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', '描述', "age1", "age2"],
            colModel: [
                { name: 'id', index: 'id', width: 55 },
                { name: 'invdate', index: 'invdate', width: 110, editable: true, sortable: true },
                { name: 'name', index: 'name asc, invdate', width: 100, editable: true },
                { name: 'amount', index: 'amount', width: 80, align: "right", editable: true },
                { name: 'tax', index: 'tax', width: 80, align: "right", editable: true },
                { name: 'total', index: 'total', width: 80, align: "right", editable: true, formatter: 'integer', formatoptions: { thousandsSeparator: ',' } },
                { name: 'note', index: 'note', width: 150, editable: true },
                { name: 'age1', index: 'age1', width: 80, editable: true, },
                { name: 'age2', index: 'age2', width: 80, editable: false, }
            ],
            gridComplete: function () {
            },
            onSelectRow: function (id) { },
            forceFit: true,
            cellEdit: true,
            cellsubmit: 'clientArray',
            width: 700,
            height: 300,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            shrinkToFit: false,
            rownumbers: true,
            caption: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            //footerrow: true,
            //userDataOnFooter: true
        });
        var rows = json.rows;
        for (var i = 0; i <= rows.length; i++) {
            jQuery("#list2").jqGrid('addRowData', i + 1, rows[i]);
        }
        jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, search: false });

        jQuery("#list2").jqGrid('setGroupHeaders', {
            useColSpanStyle: false,
            groupHeaders: [
              { startColumnName: 'name', numberOfColumns: 2, titleText: 'Client Details' }
            ]
        });
        jQuery("#list2").jqGrid('setFrozenColumns');
        jQuery("#resize").jqGrid('gridResize', { minWidth: 350, maxWidth: 800, minHeight: 80, maxHeight: 350 });
    })


</script>
